<template>
    <div class="app-container">

        <!-- 搜索表单 -->
        <el-form ref="queryRef" :model="queryParams" :inline=true label-width="68px" v-show="showSearch">
            <el-form-item label="品牌名称" prop="name">
                <el-input placeholder="请输入品牌名称" clearable v-model="queryParams.name"  @keyup.shift.enter="his.handleShiftEnter()" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 功能按钮栏 -->
        <el-row :gutter=10 class="mb8">
            <el-col :span=1.5>
                <el-button type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
            </el-col>
            <el-col :span=1.5>
                <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate(ids)">修改</el-button>
            </el-col>
            <el-col :span=1.5>
                <el-button type="danger" plain icon="Delete" :disabled="multiple"
                    @click="handleDelete(ids, names)">删除</el-button>
            </el-col>
            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>


        <!-- 数据展示表格 -->
        <el-table :data="brandList" v-loading="loading" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="品牌名称" prop="name" width="200" />
            <el-table-column label="品牌图标" prop="logo" #default="scope">
                <img :src="scope.row.logo" width="50" />
            </el-table-column>
            <el-table-column label="创建时间" prop="createTime" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" #default="scope">
                <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row.id)">修改</el-button>
                <el-button link type="primary" icon="Delete"
                    @click="handleDelete(scope.row.id, scope.row.name)">删除</el-button>
            </el-table-column>
        </el-table>

        <!--elmentplus 的分页组件 -->
        <!-- <el-pagination
          layout="prev, pager, next"
          v-model:page-size="queryParams.pageSize"
          v-model:current-page="queryParams.pageNum"
          
          :page-sizes="[10,20,30,100]"
          @size-change="getList"
          @current-change="getList"
      /> -->

        <!-- 若依分页组件  -->
        <pagination v-show="total > 0" layout="sizes,prev,pager,next,jumper,->,total,slot"
            v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total"
            :page-sizes="[10, 20, 50, 100]" @pagination="getList" />

        <!-- 新增或修改分类品牌对话框 -->
        <el-dialog :title="title" v-model="open" width="500px" append-to-body>
            <el-form ref="brandRef" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="品牌名称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入品牌名称" />
                </el-form-item>
                <el-form-item label="品牌图标" prop="logo">
                    <el-upload class="avatar-uploader" :action="imgUpload.url" :headers="imgUpload.headers"
                        :show-file-list="false" :on-success="handleAvatarSuccess">
                        <img v-if="form.logo" :src="form.logo" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm()">确 定</el-button>
                    <el-button @click="cancle()">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup name="Brand">
//引入api接口
import { listBrand, addBrand, getBrandDetail, updateBrand, deleteBrandById } from '@/api/product/brand.js';
import { reactive, ref } from 'vue';
import { getToken } from "@/utils/auth.js";

const { proxy } = getCurrentInstance();
//分页数据列表
const brandList = ref([]);
//列表总记录数
const total = ref(0);
//加载数据时显示的动效控制
const loading = ref(true);
//新增与修改弹出
const open = ref(false);
//新增与修改弹出层标题
const title = ref("");
//批量操作的品牌id列表
const ids = ref([]);
//批量操作的品牌名称列表
const names = ref([]);
//单选控制
const single = ref(true);
//多选控制
const multiple = ref(true);
//定义隐藏搜索控制模型
const showSearch = ref(true);

// 参数
const data = reactive(
    {
        //分页查询的参数
        queryParams: {
            pageNum: 1,
            pageSize: 10,
            name: null
        },
        //新增品牌表单数据
        form: {
            id: null,
            name: null,
            logo: null
        },
        //图像上传的参数
        imgUpload: {
            //设置上传的请求头
            headers: {
                Authorization: "Bearer " + getToken()
            },
            //图片上传的方法地址
            url: import.meta.env.VITE_APP_BASE_API + "/file/upload"
        },
        rules: {
            name: [{ required: true, message: "品牌名称不能为空", trigger: "blur" }],
            logo: [{ required: true, message: "品牌LOGO不能为空", trigger: "blur" }]
        }
    })
const { queryParams, form, imgUpload, rules } = toRefs(data);

// 分页查询
function getList() {
    loading.value = true;
    listBrand(queryParams.value).then(
        response => {
            brandList.value = response.rows;
            total.value = response.total;
            loading.value = false;
        }
    )
}

//执行查询品牌列表
getList();

// 根据 brand名称 搜索
function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
}

// 重置分页查询请求参数
function resetQuery() {
    // queryParams.value.name = null;
    // queryParams.value.pageNum = 1;
    // queryParams.value.pageSize = 10;
    //这里不仅会清除queryParams的数据，还会将对话框中的校验信息清除
    proxy.resetForm("queryRef");
    handleQuery();
}
// 表单重置
function reset() {
    form.value = {
        id: null,
        name: null,
        logo: null
    };
    //重置name和logo
    proxy.resetForm("brandRef")
}
//打开新建品牌对话框
function handleAdd() {
    reset();
    open.value = true;
    title.value = '新增品牌';
}
//打开修改品牌信息对话框
function handleUpdate(id) {
    reset();
    open.value = true;
    title.value = '修改品牌信息';
    getBrandDetail(id).then(
        response => {
            form.value.id = response.data.id;
            form.value.name = response.data.name;
            form.value.logo = response.data.logo;
        }
    )
}
//删除品牌
function handleDelete(ids, names) {
    if (ids == null) proxy.$modal.msgError("请先选择品牌");
    else {
        proxy.$modal.confirm('是否确认删除品牌:' + names).then(
            () => {
                return deleteBrandById(ids);
            }
        ).then(
            () => {
                getList();
                proxy.$modal.msgSuccess("删除成功");
            }
        ).catch(
            (error) => {
                proxy.$modal.msgError("删除失败");
            }
        )
    }
}

//多选框变化时
function handleSelectionChange(selection) {
    ids.value = selection.map(item => item.id);
    names.value = selection.map(item => item.name);
    //选中1条为false
    single.value = selection.length != 1;
    //没选为true
    multiple.value = !selection.length;
}



//品牌图片上传成功后的回调函数
function handleAvatarSuccess(response) {
    form.value.logo = response.data.url;
}
//提交按钮
function submitForm() {
    proxy.$refs["brandRef"].validate(
        valid => {
            if (valid) {
                if (form.value.id != null) {
                    updateBrand(form.value).then(
                        response => {
                            proxy.$modal.msgSuccess("修改成功");
                            open.value = false;
                            getList();
                        }
                    ).catch(
                        error => {
                            proxy.$modal.msgError("修改失败");
                            open.value = false;
                        }
                    )
                } else {
                    addBrand(form.value).then(response => {
                        proxy.$modal.msgSuccess("新增成功");
                        //关闭对话框
                        open.value = false;
                        //刷新列表页
                        getList();
                    });
                }
            }
        }
    )
}
//取消按钮
function cancle() {
    open.value = false;
    reset()
}

// shift enter 键触发搜索
function handleShiftEnter(){
    handleQuery();
}


</script>




<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>